<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<style type="text/css">
			/* 去边距 */
			*{
				margin: 0;
				padding: 0;
			}
			#container {
				width: 980px;
				/* background-color: red; */
				height: 1000px;
				margin: 0 auto;
			}
			#car {
				float: right;
				padding-top: 5px;
			}
			#car  ul li {
				list-style: none;
				float: left;
			}
			#car  ul li  a {
				width: 28px;
				height: 28px;
				text-align: none;
				font-size: 12px;
				color: #333333;
				display: inline-block;
				line-height: 28px;
				text-align: center;
			}
			#car  ul li  a.text{
				width: 54px;
			}
			#car  ul li  a.pic {
				background: url(../img/icon.gif) no-repeat 4px -2px;
			}
			#car  ul li a.pic2{background-position: -43px -2px;}
			#car  ul li a.pic3{background-position: -84px -2px;}
			#car  ul li a.pic4{background-position: -125px -2px;}
			#car  ul li a.pic5{
				width: 46px;
				background-position: -1px -25px;
			}
		</style>
	</head>
	<body>
		<!-- 第一部分结构 -->
		<div id="container">
			<div id="car">
				<ul>
					<li><a href="" class="pic"></a></li>
					<li><a href="" class="text">购物车</a></li>
					<li><a href="" class="pic pic2"></a></li>
					<li><a href="" class="text">加入收藏</a></li>
					<li><a href="" class="pic pic3"></a></li>
					<li><a href="" class="text">帮助中心</a></li>
					<li><a href="" class="pic pic4"></a></li>
					<li><a href="" class="text">设为首页</a></li>
					<li><a href="" class="pic pic5">登录</a></li>
					<li><a href="" class="pic pic5">注册</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>
